<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/home:: common_header(~{::link})">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
	<div id="sharesDiv" class="container-fluid">
		<div class="pb-3 pt-1"><button type="button" class="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#addSharesModal" @click="handleAdd">新增</button></div>
		<div class="row" v-cloak>
			<div class="col-sm-4 col-md-4 col-lg-3" v-for="(row, index) in rows" :key="index">
				<div v-if="row.isShow" class="card text-white" :class="row.bg">
					<div class="card-header clearfix">
						<div class="float-left">{{row.shares.name + ' ' + row.shares.code}}</div>
						<div class="float-right">
							<a href="javascript:void(0);" class="text-white" data-toggle="modal" data-target="#addSharesModal" @click="handleEdit(row)"><i class="fa fa-edit"></i></a>
							<a href="javascript:void(0);" class="text-white" @click="handleHide(row)"><i class="fa fa-eye-slash"></i></a>
							<a href="javascript:void(0);" class="text-white" @click="handleDelete(row)"><i class="fa fa-trash-o"></i></a>
						</div>
					</div>
					<div class="card-body text-dark bg-light">
						<h5 class="card-title">{{row.shares.name}}（￥{{row.shares.maxPrice}}）</h5>
						<div class="row">
							<div class="col text-right">最新收盘价：</div>
							<div class="col">￥{{row.dailies[0].endPrice}}</div>
						</div>
						<div class="row">
							<div class="col text-right">涨跌幅：</div>
							<div class="col">{{row.dailies[0].upDownRate}}%</div>
						</div>
						<div class="row">
							<div class="col text-right">卖出价：</div>
							<div class="col">￥{{(row.shares.maxPrice * 0.85).toFixed(2)}}</div>
						</div>
						<div class="text-center alert alert-danger mb-0 mt-1 p-1">{{row.dailies[0].endPrice < row.shares.maxPrice ? '重点关注' : ''}}</div>
					</div>
					<ul v-if="row.showDetails" class="list-group list-group-flush text-secondary">
				    	<li class="list-group-item" v-for="daily in row.dailies" :key="daily.day">
				    		<div class="float-left" style="line-height: 1.5;">{{daily.day}}</div>
				    		<div class="float-right align-middle" style="line-height: 1.5;">
				    			<span class="badge badge-info">￥{{daily.endPrice}}</span>
				    			<span class="badge" :class="daily.upDownRate >= 0 ? 'badge-danger' : 'badge-success'">{{daily.upDownRate}}%</span>
				    		</div>
				    	</li>
				  	</ul>
				  	<div class="card-footer p-0 text-center">
					    <button v-if="!row.showDetails || row.totalPage > (row.page + 1)" type="button" class="btn btn-link text-white" @click="handleLoadMore(row)">加载更多</button>
					    <span v-else class="text-white">已经到底了</span>
					</div>
				</div>
			</div>
		</div>
		<div v-show="showAdd" class="modal fade" id="addSharesModal" tabindex="-1" role="dialog" aria-labelledby="addSharesModalTitle" aria-hidden="true">
		  <div class="modal-dialog modal-dialog-centered" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="addSharesModalTitle">新增股票</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		      	<form>
		      	  <fieldset class="form-group">
		      	  	<div class="form-group">
      					<label class="col-form-label pt-0">请选择交易所</label>
      					<div>
      						<div class="form-check form-check-inline">
							  <input class="form-check-input" type="radio" name="market" id="shanghaiRadio" value="sh" v-model="form.market">
							  <label class="form-check-label" for="shanghaiRadio">上海证券交易所</label>
							</div>
							<div class="form-check form-check-inline">
							  <input class="form-check-input" type="radio" name="market" id="shenzhenRadio" value="sz" v-model="form.market">
							  <label class="form-check-label" for="shenzhenRadio">深圳证券交易所</label>
							</div>
      					</div>
      				</div>
		      	  </fieldset>
				  <div class="form-group">
				    <label for="sharesCodeInput">股票代码</label>
				    <input type="number" class="form-control" id="sharesCodeInput" aria-describedby="codeHelp" v-model="form.code" placeholder="请输入股票代码">
				    <small id="codeHelp" class="form-text text-muted">不知道的自己去查</small>
				  </div>
				  <div class="form-group">
				    <label for="sharesBuyTimeInput">购买时间</label>
				    <input type="text" class="form-control" id="sharesBuyTimeInput" v-model="form.buyTime" placeholder="请选择购买时间">
				  </div>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="showAdd = false">关闭</button>
		        <button type="button" class="btn btn-primary" @click="handleSave">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
			<div class="toast" role="alert" aria-live="assertive" autohide="false" aria-atomic="true">
			  <div class="toast-header">
			    <strong class="mr-auto">{{alert.title}}</strong>
			    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
			      <span aria-hidden="true">&times;</span>
			    </button>
			  </div>
			  <div class="toast-body">{{alert.content}}</div>
			</div>
		</div>
	</div>
	<div th:replace="fragments/home::common_script"></div>
	<script type="text/javascript" th:src="@{/js/index.js}"></script>
</body>

</html>